Tutorials
Getting started
Chart interface
Web components
Chart internals
Data integration
Customization
Frameworks and bundlers
Mobile development
Plug-ins
Troubleshooting
Glossary
Reference
JSFiddles

Angular Component Toolkit

The ChartIQ Angular component toolkit provides developers with a variety of complete charting solutions that can be easily incorporated into Angular applications.

The toolkit is modularized. Components are contained in individual modules that can be transferred to applications with minimal effort.

Toolkit components include:

Clone the chartiq-angular-app project on GitHub to start working with the Angular component toolkit.

AdvancedChartComponent

AdvancedChartComponent is the Angular equivalent of ChartIQ's technical-analysis-chart.html advanced charting template.

With AdvancedChartComponent, developers can add full-featured charting to their Angular applications, including ChartIQ plug‑ins and add‑ons, in a few simple steps.

Let's look at the component parts.

HTML Template

AdvancedChartComponent takes advantage of ChartIQ's cross-platform, W3C-standard web components to create a complete chart user interface. The AdvancedChartComponent HTML template (advanced-chart.component.html in the src/app/chartiq/components/advanced-chart folder of the project) is a collection of UI web components. Here's a markup snippet that sets up a portion of the chart's top navigation bar:

<cq-context #contextContainer [ngClass]="chartService.breakpoint$ | async">

    <div class="ciq-nav full-screen-hide">

        <!-- enables the more button when in break-sm mode -->
        <div class="sidenav-toggle ciq-toggles">
            <cq-toggle
                class="ciq-sidenav"
                cq-member="sidenav"
                cq-toggles="sidenavOn,sidenavOff"
                cq-toggle-classes="active,"><span></span>
                <cq-tooltip>More</cq-tooltip>
            </cq-toggle>
        </div>

        <cq-menu class="ciq-search">
            <cq-lookup cq-keystroke-claim cq-keystroke-default cq-uppercase></cq-lookup>
        </cq-menu>

        <!-- any entry in this div will be shown in the side navigation bar in break-sm mode -->
        <cq-side-nav cq-on="sidenavOn">
            <div class="icon-toggles ciq-toggles">
                <cq-toggle class="ciq-draw" cq-member="drawing"><span></span><cq-tooltip>Draw</cq-tooltip></cq-toggle>
                <cq-toggle class="ciq-CH" cq-member="crosshair"><span></span><cq-tooltip>Crosshair</cq-tooltip></cq-toggle>
                <cq-info-toggle></cq-info-toggle>
            </div>
        </cq-side-nav>

        <div class="ciq-menu-section">

            <div class="ciq-dropdowns">
                <cq-menu class="ciq-menu ciq-period">
                    <span><cq-clickable stxbind="Layout.periodicity">1D</cq-clickable></span>
                    <cq-menu-dropdown>
                        <cq-menu-container cq-name="menuPeriodicity"></cq-menu-container>
                    </cq-menu-dropdown>
                </cq-menu>
                .
                .
                .

ChartIQ web components begin with the prefix "cq-"; they're styled with CSS class selectors that typically begin with "ciq-".

The snippet contains a variety of components: menus (cq-menu), a text entry lookup control (cq-lookup), toggle buttons (cq-toggle), clickable items (cq-clickable), tooltips (cq-tooltip).

And that's just the beginning — advanced-chart.component.html contains a full-featured user interface of web components.

You can customize the chart UI by adding, removing, or modifying components; that is, just by changing the markup. You can include your own custom Angular components, and you can extend the ChartIQ components in Angular.

(See the complete list of ChartIQ web components.)

Provider

A ChartService class (chart.service.ts in the src/app/chartiq folder) constructs the chart and user interface. The constructor creates an instance of the CIQ.UI.Chart class, which is defined in the ChartIQ library (CIQ and UI are JavaScript namespaces). The ChartService class wraps the methods of CIQ.UI.Chart to create the chart, user interface, and user interface context.

The service also sets up the web component communication channels. ChartIQ's web components are fully encapsulated; they communicate with the outside world through channels, using a publish/subscribe model.

You can configure a variety of chart features by modifying the configuration object passed to the ChartService methods. The default configuration object is part of the ChartIQ library.

Style Sheets

The ChartIQ library includes CSS for the base chart and for add-ons and plug-ins. In chartiq-angular-app, the base styles are included in chartiq-base-styles.scss in the src/app folder:

@import '~chartiq/css/stx-chart.css'; // Chart API
@import '~chartiq/css/chartiq.css'; // Chart UI

Resources

The ChartIQ library includes a variety of optional plug-ins that add powerful capabilities to charts.

AdvancedChartComponent comes with all of the plug-ins built-in but not enabled. The plug-ins are imported in the component's resources.ts file, but the import statements are commented out.

So, adding compelling new features to your Angular chart application is easy: just uncomment the imports in the resources file.

For example, to enable the Trade from Chart (TFC) plug-in, uncomment the following lines in resources.ts:

// import 'chartiq/plugins/tfc/tfc-loader';
// import 'chartiq/plugins/tfc/tfc-demo';

The plug-in loads any required CSS files automatically.

MultiChartComponent

MultiChartComponent displays two advanced charts on screen by doubling down on AdvancedChartComponent.

Here is the component's HTML template, src/app/chartiq/components/multi-chart/multi-chart.component.html, in its entirety:

<div class="column left"><cq-advanced-chart chartId="chart0" symbol="AAPL"></cq-advanced-chart></div>
<div class="column right"><cq-advanced-chart chartId="chart1" symbol="MSFT"></cq-advanced-chart></div>

ActiveTraderComponent

ActiveTraderComponent sets up a trading desktop comprising a chart, UI, the Trade from Chart plug-in, a trade history pie chart, and the following add-ons: Market Depth, Level 2 Heat Map, Order Book, and Range Slider.

ActiveTraderComponent is structured similarly to AdvancedChartComponent. The definition files are similar; both components have similar chart.service.ts and resources.ts files.

Although the duplication may seem to violate the DRY principle, it enables each charting module to be easily and independently transferred to other applications.

CustomChartService

CustomChartComponent integrates native Angular components with ChartIQ web components.

The native cq-angular-shortcut-dialog component creates a dialog box that enables users to set shortcut keys on the chart's drawing tools. User interaction with a dropdown menu created by a ChartIQ cq-menu web component opens the dialog box.

The cq-angular-recent-symbols component wraps the ChartIQ cq-lookup and cq-comparison-lookup web components and extends their functionality. cq-angular-recent-symbols adds a RECENT tab to the lookup controls created by the web components. The tab displays a list of recently used financial instrument symbols maintained by the cq-angular-recent-symbols component.

Here's the markup from custom-chart.component.html (which is in the src/app/custom-chartiq/components/custom-chart folder):

.
.
.
<cq-menu class="ciq-search">
    <cq-angular-recent-symbols>
        <cq-lookup cq-keystroke-claim cq-keystroke-default cq-uppercase></cq-lookup>
    </cq-angular-recent-symbols>
</cq-menu>
.
.
.
<cq-angular-recent-symbols count="2">
    <div class="ciq-chart-area">
        <div class="ciq-chart">

            <cq-palette-dock>
                <div class="palette-dock-container">
                    <cq-drawing-palette class="palette-drawing grid palette-hide" docked="true" orientation="vertical" min-height="300" cq-drawing-edit="none"></cq-drawing-palette>
                    <cq-drawing-settings class="palette-settings" docked="true" hide="true" orientation="horizontal" min-height="40" cq-drawing-edit="none"></cq-drawing-settings>
                </div>
            </cq-palette-dock>

            <div class="chartContainer">
                <cq-chart-title cq-marker cq-browser-tab></cq-chart-title>
                <cq-chartcontrol-group class="full-screen-show" cq-marker></cq-chartcontrol-group>
                <cq-comparison-lookup></cq-comparison-lookup>
                <cq-chart-legend></cq-chart-legend>
                <cq-loader></cq-loader>
            </div>
        </div>
    </div>
</cq-angular-recent-symbols>
.
.
.

CustomChartComponent is structured as a self-contained module similar to ActiveTraderComponent and AdvancedChartComponent (similar service and resources files) to make it easily transferrable to existing Angular applications.

HelloWorldComponent

HelloWorldComponent creates a chart from a static data source. The chart does not have a user interface; and so, HelloWorldComponent is a good starting point for applications that require a custom‑made UI.

The code in the component definition file, hello-world.component.ts (in the src/app/chartiq-hello-world folder), shows how easy it is to create a basic chart:

import { Component, ViewChild, ElementRef, AfterViewInit, ViewEncapsulation } from '@angular/core';

import { CIQ } from 'chartiq/js/chartiq';

/**
 * The Hello World component creates a basic chart from a built-in static data source. The chart
 * does not have a user interface.
 */
@Component({
    selector: 'cq-hello-world',
    templateUrl: './hello-world.component.html',
    styleUrls: ['./hello-world.component.scss'],
    encapsulation: ViewEncapsulation.None
})
export class HelloWorldComponent implements AfterViewInit {
    @ViewChild('chartContainer', { static: true }) chartContainer: ElementRef;

    constructor() {}

    ngAfterViewInit() {
        const container = this.chartContainer.nativeElement;

        const ciq = new CIQ.ChartEngine({ container });

        ciq.loadChart('SPY', {
            masterData: this.getMasterData(),
            periodicity: {
                period: 1,
                interval: 5,
                timeUnit: 'minute',
            },
        });
    }

    getMasterData() {
        const masterData = [
            {Date:"2015-03-31 14:40", Open:156.64, High:156.66, Low:156.57, Close:156.59, Volume:932912},
            {Date:"2015-03-31 14:50", Open:156.58, High:156.62, Low:156.57, Close:156.61, Volume:700952},
            {Date:"2015-03-31 14:55", Open:156.59, High:156.60, Low:156.55, Close:156.58, Volume:1084428},
            .
            .
            .
        ];
        return masterData;
    }
}

Next steps